<template>
  <div>
    <div class="top1">
      <el-form :inline="true" :model="worklist.data" status-icon :rules="rules">
        <el-row>
          <el-col :span="6">
             <el-form-item
                label="工作日期"
                :label-width="formLabelWidth"
                
                 prop="workdate"
              >
               <el-date-picker
              v-model="worklist.data.workdate"
              type="date"
              placeholder="选择日期"
              size="mini"
             
            >
            </el-date-picker>
              </el-form-item>

            <!-- 工作日期：
            <el-date-picker
              v-model="worklist.data.workdate"
              type="date"
              placeholder="选择日期"
              size="mini"
              prop="workdate"
            >
            </el-date-picker> -->
          </el-col>
          <el-col :span="4"> </el-col>
          <el-col :span="6">
            <el-form-item
                label="手机号"
                :label-width="formLabelWidth"
                prop="mobile"
              >
                <el-input
                  v-model.number="worklist.data.mobile"
                  autocomplete="off"
                   size="mini"
                ></el-input>
              </el-form-item>
            <!-- 手机号：
            <el-input
              v-model="worklist.data.mobile"
              placeholder="请输入内容"
              size="mini"
            ></el-input> -->
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>
        <el-row
          ><br />
          <el-col :span="24">
            <el-form-item
                label="本周工作总结"
                :label-width="formLabelWidth"
                prop="worksummary"
              >
               <el-input
            
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="worklist.data.worksummary"
            >
            </el-input>
              </el-form-item>
            <!-- <span>本周工作总结</span>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="worklist.data.worksummary"
            >
            </el-input> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="top1">
      <el-row>
        <el-col :span="8"><span>工作明细</span></el-col>
        <el-col :span="12">
          <br />
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            style="margin-right: 80px"
            size="mini"
            @click="changeDialogFormVisible"
            >添加明细</el-button
          >
          <el-dialog title="新增明细" :visible.sync="dialogFormVisible">
            <el-form :model="worklist.form" status-icon :rules="rules">
              <el-form-item
                label="工作类型"
                :label-width="formLabelWidth"
                prop="worktype"
              >
                <el-select
                  v-model="worklist.form.worktype"
                  placeholder="请选择活动区域"
                  
                >
                  <el-option label="前端" value="前端"></el-option>
                  <el-option label="后端" value="后端"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="工作事项"
                :label-width="formLabelWidth"
                prop="workdesc"
              >
                <el-input
                  v-model="worklist.form.workdesc"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="工作用时"
                :label-width="formLabelWidth"
                prop="worktime"
              >
                <el-input
                  v-model.number="worklist.form.worktime"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="tianjia('worklist.form')">确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>
      <div style="border: 1px solid rgb(183, 179, 179); margin-top: 5px"></div>
      <el-table :data="dataForm" style="width: 100%">
        <el-table-column label="工作类型" width="280" prop="worktype">
          <!-- <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.worktype }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="工作事项" width="280" prop="workdesc">
          <!-- <template slot-scope="scope">
            <span>{{ scope.row.workdesc }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="工作用时" width="280" prop="worktime">
          <!-- <template slot-scope="scope">
            <span>{{ scope.row.worktime }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="操作" width="220px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.worklogdetailid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.pageSize"
          :page-sizes="[2, 4, 8]"
          :current-page.sync="listQuery.pageNum"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="boot">
      <el-button type="primary" @click="fanhun">返回</el-button>
      <el-button type="primary" @click="baocun()">保存</el-button>
    </div>
  </div>
</template>

<script>
import {
  logdetaillist,
  logdetailinster,
  logdetaildelete,
  loginster,
  logcha,
} from "@/api/work";
let checkPhone = (rule, value, callback) => {
    let reg = /^1[345789]\d{9}$/
    if (!reg.test(value)) {
        callback(new Error('请输入11位手机号'))
    } else {
        callback()
    }
}
export default {
  data() {
    return {
      workdate: null,
      worklist: {
        data: {
          worklogid: null,
          sysdate: null,
          isable: null,
          workdate: null,
          worksummary: null,
          mobile: null,
          submitdate: null,
          isshow: null,
          userid: null,
        },
        form: {
          worklogdetailid: null,
          worktype: null,
          workdesc: null,
          no: null,
          worktime: null,
          worklogid: null,
        },
      },
      dataForm: [],
      operateType: null,
      listQuery: {
        keyword: null,
        nameCn: null,
        pageNum: 1,
        pageSize: 4,
        worklogid: null,
      },
      total: null,
      listLoading: true,
      dialogFormVisible: false,

      formLabelWidth: "120px",
      worklogdetail: null,
      mobile: null,
      aa: null,
      rules: {
        worktype: [
          { required: true, message: "请输入工作类型", trigger: "blur" },
        ],
        workdesc: [
          { required: true, message: "请输入工作事项", trigger: "blur" },
        ],
        worktime: [
          { required: true, message: "请输入工作用时", trigger: "blur" },
          { type: 'number', message: '工作用时必须为数字值'}
        ],
        workdate: [
          { required: true, message: "请选择工作日期", trigger: "blur" },
        ],
        mobile: [
          {required: true,validator:checkPhone, message: "请输入正确的手机号", trigger: "blur" },
           { type: 'number', message: '手机号必须为数字值'}
        ],
        worksummary: [
          { required: true, message: "请输入工作总结", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    /**  接收对象  **/
    const data = this.$route.query.row;
    if (data != undefined || data != null) {
      this.worklist.data = data;
      this.cha();
    }

    //  const look = this.$route.query.look;
    //  if (look != undefined || look != null) {
    //   this.chakan = false;
    // }
  },
  methods: {
    cha() {
      //编辑时
      //查询分页
      this.worklist.form.worklogid = this.worklist.data.worklogid;
      this.listQuery.worklogid = this.worklist.data.worklogid;
      this.listLoading = true;
      logdetaillist(this.listQuery).then((response) => {
        this.listLoading = false;
        this.dataForm = response.data.records;
        this.total = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
        console.log("查询成功");
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.cha();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.cha();
    },
    shuaxin() {
      //刷新
      this.worklist = null;
    },
    // 改变弹框属性
    changeDialogFormVisible() {
      this.dialogFormVisible = true;
      this.worklist.form.worktype = null;
      this.worklist.form.workdesc = null;
      this.worklist.form.worktime = null;
      this.worklist.form.worklogdetailid = null;
    },
    tianjia(worklist) {
      //添加
        //  this.$refs[worklist].validate((valid) => {
        //   if (valid) {          
            console.log("触发点击查看id是:" + this.worklist.form.worklogdetailid);
      if (this.worklist.form.worklogdetailid == null) {
        console.log("进来了id=null的");
        var bj = new Object();
        bj.worktype = this.worklist.form.worktype;
        bj.worklogdetailid = null;
        bj.workdesc = this.worklist.form.workdesc;
        bj.worktime = this.worklist.form.worktime;
        bj.worklogid = null;
        this.dataForm.push(bj);
        this.dialogFormVisible = false;
      }
      if (this.worklist.form.worklogdetailid != null) {
        console.log("进来了id!=null的");
        logdetailinster(this.worklist.form).then((response) => {
          this.dialogFormVisible = false;
          this.cha();
        });
      }
        //   } else {
        //     console.log('error submit!!');
        //     return false;
        //   }
        // });     
    },
    handleEdit(row) {
      //编辑打开弹框
      this.dialogFormVisible = true;
      this.worklist.form = row;
    },
    handleDelete(id) {
      //删除
      if(id==null){
        return false;
      }else{
         logdetaildelete(id).then((response) => {
        this.cha();
      });
      }
     
    },
    fanhun() {
      //返回
      this.$router.push({ path: "/work/index" });
    },
    baocun() {
      if (this.worklist.data.worklogid == null) {
        loginster(this.worklist.data).then((response) => {
          console.log("添加的时候实现主表添加");
          const aa = this.worklist.data.mobile;
          logcha(aa).then((response) => {
            this.mobile = response.data;
            console.log("添加时实现查询id");
            for (var a = 0; a < 20; a++) {
              this.aa = this.dataForm[a];
              this.aa.worklogid = this.mobile[0].worklogid;
              if (this.aa.worktype == null) {
                a = 20;
                this.fanhun();
              }
              logdetailinster(this.aa).then((response) => {
                console.log("添加时副表添加成功");
              });
            }
          });
        });
      }
      if (this.worklist.data.worklogid != null) {
      }
      loginster(this.worklist.data).then((response) => {
        console.log("编辑时主表修改成功");
        for (var a = 0; a < 20; a++) {
          this.aa = this.dataForm[a];
          this.aa.worklogid = this.worklist.data.worklogid;
          if (this.aa.worktype == null) {
            a = 20;
            this.fanhun();
          }
          logdetailinster(this.aa).then((response) => {
            console.log("编辑时添加成功");
          });
        }
      });
    },
  },
};
</script>

<style>
.top1 {
  width: 96%;
  margin: 30px;
  padding: 10px 50px;
  border: 1px solid rgb(183, 179, 179);
  border-radius: 5px;
  margin-top: 5px;
}
.boot {
  display: inline-block;
  margin-top: 100px;
  margin-left: 45%;
}
</style>